:root{
  --bg: #0b1020;
  --fg: #e6e8ef;
  --muted: #a8b0c3;
  --surface: #151a2e;
  --border: #242a42;
  --accent: #4f46e5;
}
.theme-light{
  --bg: #ffffff;
  --fg: #0b1020;
  --muted: #5a6278;
  --surface: #f6f7fb;
  --border: #e6e8ef;
  --accent: #4f46e5;
}
html, body { height: 100%; }
body{
  background: var(--bg);
  color: var(--fg);
  width: 360px;
  max-width: 100vw;
}
.app{ display:flex; flex-direction:column; height: 600px; max-height: 100vh; }
.app__header{
  display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); background: var(--surface);
}
.app__brand{ font-weight:600; }
.app__controls{ display:flex; gap:8px; align-items:center; }
.btn{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; cursor:pointer; }
.btn:hover{ border-color: var(--accent); }
.select{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; }

.tabs{ display:flex; overflow:auto; gap:6px; padding:8px; border-bottom:1px solid var(--border); }
.tab{ background:transparent; color:var(--muted); border:1px solid var(--border); padding:6px 10px; border-radius:999px; cursor:pointer; }
.tab.is-active{ color:var(--fg); border-color: var(--accent); }

.panes{ flex:1; overflow:auto; padding:12px; }
.pane{ display:none; }
.pane.is-active{ display:block; }

/* Basic layouts for widgets */
.grid{ display:grid; gap:8px; }
.grid.cols-4{ grid-template-columns: repeat(4, 1fr); }
.display{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:right; min-height:48px; font-size:18px; }
.key{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:10px; text-align:center; cursor:pointer; }
.key.primary{ background: var(--accent); color: white; border-color: var(--accent); }
.row{ display:flex; gap:8px; align-items:center; }
label{ display:flex; gap:8px; align-items:center; justify-content:space-between; }
input, select{ background:var(--surface); color:var(--fg); border:1px solid var(--border); padding:6px 8px; border-radius:8px; }

/* Responsive */
@media (max-width: 340px){
  body{ width: 100vw; }
  .tabs{ flex-wrap: wrap; }
}


